<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
  <link rel="stylesheet" href="/ftl/css/laypage.css">

  <script src="/ftl/js/jquery/jquery.min.js"></script>
  <script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
  <script src="/ftl/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
  <script src="/ftl/js/vue/vue.min.js"></script>
  <style>
    input.error{
      border: 1px solid #E6594E;
    }
  </style>
</head>
<body>
<div class="container">
  <form id="editUserForm">
    <br/>
    <div class="form-group">
      <label for="username">用户名称：</label>
      <input type="text" class="form-control" id="username" name="username" value="${data.name}" placeholder="输入名称">
    </div>
    <div class="form-group">
      <label for="userage">用户年龄：</label>
      <input type="text" class="form-control" id="userage" name="userage" value="${data.age}" placeholder="输入年龄">
    </div>
    <div class="form-group">
      <label for="dept">用户部门：</label>
      <select id="dept">
        <option v-for="(item,index) in result" :value="item.id" :selected="item.id===${data.deptid}">{{item.deptname}}</option>
      </select>
    </div>
    <div class="form-group">
      <button type="button" id="saveBtn" class="btn btn-success">提交</button>
      <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
    </div>
  </form>
</div>

<script>
  var app=new Vue({
    el:".container",
    data:{
      result:[]
    }
  })
  $(function (){
    $.ajax({
      type: "post",
      url: "/getDept.do",
      success:function (data){
        app.result=data
      }
    })
  })
  var updateUser=function (){
    if (!check().form()){
      return
    }
    $.ajax({
      type:"post",
      url:"/updateUser.do",
      data:{
        "id":${data.id},
        "name":$("#username").val(),
        "age":$("#userage").val(),
        "deptid":$("#dept").val()
      },
      success:function (data){
        $("#cancelBtn").click()
      }
    })
  }

  $("#saveBtn").click(function (){
    updateUser()
  })

  $("#cancelBtn").click(function(){
    var index=parent.layer.getFrameIndex(window.name)
    parent.getUserPageList()
    parent.layer.close(index)
  })

  function check(){
    return $("#editUserForm").validate({
      rules:{
        username:{
          required:true
        },
        userage:{
          required:true
        }
      },
      message:{
        username:{
          required:''
        },
        userage:{
          required:''
        }
      }
    })
  }
</script>
</body>
</html>